<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8"/>
  <title>iconfont Demo</title>
  <link rel="shortcut icon" href="//img.alicdn.com/imgextra/i4/O1CN01Z5paLz1O0zuCC7osS_!!6000000001644-55-tps-83-82.svg" type="image/x-icon"/>
  <link rel="icon" type="image/svg+xml" href="//img.alicdn.com/imgextra/i4/O1CN01Z5paLz1O0zuCC7osS_!!6000000001644-55-tps-83-82.svg"/>
  <link rel="stylesheet" href="https://g.alicdn.com/thx/cube/1.3.2/cube.min.css">
  <link rel="stylesheet" href="demo.css">
  <link rel="stylesheet" href="iconfont.css">
  <script src="iconfont.js"></script>
  <!-- jQuery -->
  <script src="https://a1.alicdn.com/oss/uploads/2018/12/26/7bfddb60-08e8-11e9-9b04-53e73bb6408b.js"></script>
  <!-- 代码高亮 -->
  <script src="https://a1.alicdn.com/oss/uploads/2018/12/26/a3f714d0-08e6-11e9-8a15-ebf944d7534c.js"></script>
  <style>
    .main .logo {
      margin-top: 0;
      height: auto;
    }

    .main .logo a {
      display: flex;
      align-items: center;
    }

    .main .logo .sub-title {
      margin-left: 0.5em;
      font-size: 22px;
      color: #fff;
      background: linear-gradient(-45deg, #3967FF, #B500FE);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
  </style>
</head>
<body>
  <div class="main">
    <h1 class="logo"><a href="https://www.iconfont.cn/" title="iconfont 首页" target="_blank">
      <img width="200" src="https://img.alicdn.com/imgextra/i3/O1CN01Mn65HV1FfSEzR6DKv_!!6000000000514-55-tps-228-59.svg">
      
    </a></h1>
    <div class="nav-tabs">
      <ul id="tabs" class="dib-box">
        <li class="dib active"><span>Unicode</span></li>
        <li class="dib"><span>Font class</span></li>
        <li class="dib"><span>Symbol</span></li>
      </ul>
      
      <a href="https://www.iconfont.cn/manage/index?manage_type=myprojects&projectId=3056808" target="_blank" class="nav-more">查看项目</a>
      
    </div>
    <div class="tab-container">
      <div class="content unicode" style="display: block;">
          <ul class="icon_lists dib-box">
          
            <li class="dib">
              <span class="icon iconfont">&#xe601;</span>
                <div class="name">归档</div>
                <div class="code-name">&amp;#xe601;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe856;</span>
                <div class="name">解析</div>
                <div class="code-name">&amp;#xe856;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe780;</span>
                <div class="name">指标设计</div>
                <div class="code-name">&amp;#xe780;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7d6;</span>
                <div class="name">编辑</div>
                <div class="code-name">&amp;#xe7d6;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7f2;</span>
                <div class="name">删除</div>
                <div class="code-name">&amp;#xe7f2;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7f7;</span>
                <div class="name">眼睛</div>
                <div class="code-name">&amp;#xe7f7;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7da;</span>
                <div class="name">关联</div>
                <div class="code-name">&amp;#xe7da;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe77f;</span>
                <div class="name">实时开发_1</div>
                <div class="code-name">&amp;#xe77f;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe781;</span>
                <div class="name">离线开发_1</div>
                <div class="code-name">&amp;#xe781;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7c4;</span>
                <div class="name">筛选-fill</div>
                <div class="code-name">&amp;#xe7c4;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe8ec;</span>
                <div class="name">caret-down</div>
                <div class="code-name">&amp;#xe8ec;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe8ed;</span>
                <div class="name">caret-up</div>
                <div class="code-name">&amp;#xe8ed;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe8ee;</span>
                <div class="name">caret-right</div>
                <div class="code-name">&amp;#xe8ee;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe8f0;</span>
                <div class="name">caret-left</div>
                <div class="code-name">&amp;#xe8f0;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7c7;</span>
                <div class="name">filter</div>
                <div class="code-name">&amp;#xe7c7;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7b4;</span>
                <div class="name">建模仿真-fill</div>
                <div class="code-name">&amp;#xe7b4;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe63c;</span>
                <div class="name">品质供应商</div>
                <div class="code-name">&amp;#xe63c;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe887;</span>
                <div class="name">05采购</div>
                <div class="code-name">&amp;#xe887;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe654;</span>
                <div class="name">工程师</div>
                <div class="code-name">&amp;#xe654;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6c0;</span>
                <div class="name">设计</div>
                <div class="code-name">&amp;#xe6c0;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe9ac;</span>
                <div class="name">售后配件PR申请-03</div>
                <div class="code-name">&amp;#xe9ac;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe66f;</span>
                <div class="name">制造业</div>
                <div class="code-name">&amp;#xe66f;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7a6;</span>
                <div class="name">export</div>
                <div class="code-name">&amp;#xe7a6;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7a7;</span>
                <div class="name">Import</div>
                <div class="code-name">&amp;#xe7a7;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7a1;</span>
                <div class="name">收藏-fill</div>
                <div class="code-name">&amp;#xe7a1;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7a2;</span>
                <div class="name">比较</div>
                <div class="code-name">&amp;#xe7a2;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7a3;</span>
                <div class="name">收藏</div>
                <div class="code-name">&amp;#xe7a3;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7a4;</span>
                <div class="name">排序</div>
                <div class="code-name">&amp;#xe7a4;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7a5;</span>
                <div class="name">卡片列表</div>
                <div class="code-name">&amp;#xe7a5;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7a0;</span>
                <div class="name">集成</div>
                <div class="code-name">&amp;#xe7a0;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe79e;</span>
                <div class="name">实际尺寸</div>
                <div class="code-name">&amp;#xe79e;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe79f;</span>
                <div class="name">适应画布</div>
                <div class="code-name">&amp;#xe79f;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe904;</span>
                <div class="name">409折线图-线性</div>
                <div class="code-name">&amp;#xe904;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe79b;</span>
                <div class="name">成功_1</div>
                <div class="code-name">&amp;#xe79b;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe79c;</span>
                <div class="name">错误</div>
                <div class="code-name">&amp;#xe79c;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe79d;</span>
                <div class="name">运行中</div>
                <div class="code-name">&amp;#xe79d;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe79a;</span>
                <div class="name">未选</div>
                <div class="code-name">&amp;#xe79a;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe791;</span>
                <div class="name">向导模式</div>
                <div class="code-name">&amp;#xe791;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe792;</span>
                <div class="name">字段信息</div>
                <div class="code-name">&amp;#xe792;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe793;</span>
                <div class="name">系统</div>
                <div class="code-name">&amp;#xe793;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe794;</span>
                <div class="name">行列转换</div>
                <div class="code-name">&amp;#xe794;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe795;</span>
                <div class="name">数据关联</div>
                <div class="code-name">&amp;#xe795;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe796;</span>
                <div class="name">告警</div>
                <div class="code-name">&amp;#xe796;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe797;</span>
                <div class="name">数据输出</div>
                <div class="code-name">&amp;#xe797;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe798;</span>
                <div class="name">列表信息</div>
                <div class="code-name">&amp;#xe798;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe799;</span>
                <div class="name">数据清洗</div>
                <div class="code-name">&amp;#xe799;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe756;</span>
                <div class="name">Impala</div>
                <div class="code-name">&amp;#xe756;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe78b;</span>
                <div class="name">已发布</div>
                <div class="code-name">&amp;#xe78b;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe789;</span>
                <div class="name">未运行</div>
                <div class="code-name">&amp;#xe789;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe788;</span>
                <div class="name">返回</div>
                <div class="code-name">&amp;#xe788;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe78c;</span>
                <div class="name">logout</div>
                <div class="code-name">&amp;#xe78c;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe8ef;</span>
                <div class="name">login</div>
                <div class="code-name">&amp;#xe8ef;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe67b;</span>
                <div class="name">Java</div>
                <div class="code-name">&amp;#xe67b;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe77e;</span>
                <div class="name">上传工具</div>
                <div class="code-name">&amp;#xe77e;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe784;</span>
                <div class="name">分区</div>
                <div class="code-name">&amp;#xe784;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6c7;</span>
                <div class="name">引用</div>
                <div class="code-name">&amp;#xe6c7;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe624;</span>
                <div class="name">放大</div>
                <div class="code-name">&amp;#xe624;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe62b;</span>
                <div class="name">缩小</div>
                <div class="code-name">&amp;#xe62b;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe645;</span>
                <div class="name">保存</div>
                <div class="code-name">&amp;#xe645;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe649;</span>
                <div class="name">解锁</div>
                <div class="code-name">&amp;#xe649;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe64d;</span>
                <div class="name">锁</div>
                <div class="code-name">&amp;#xe64d;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe650;</span>
                <div class="name">运行</div>
                <div class="code-name">&amp;#xe650;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe651;</span>
                <div class="name">停止</div>
                <div class="code-name">&amp;#xe651;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe660;</span>
                <div class="name">布局</div>
                <div class="code-name">&amp;#xe660;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe674;</span>
                <div class="name">导入</div>
                <div class="code-name">&amp;#xe674;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe706;</span>
                <div class="name">多选</div>
                <div class="code-name">&amp;#xe706;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe707;</span>
                <div class="name">全选</div>
                <div class="code-name">&amp;#xe707;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe77d;</span>
                <div class="name">代码检查</div>
                <div class="code-name">&amp;#xe77d;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe752;</span>
                <div class="name">Flink任务</div>
                <div class="code-name">&amp;#xe752;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe74b;</span>
                <div class="name">FlinkSQL任务</div>
                <div class="code-name">&amp;#xe74b;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe74c;</span>
                <div class="name">MapRduce</div>
                <div class="code-name">&amp;#xe74c;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe74d;</span>
                <div class="name">Python2</div>
                <div class="code-name">&amp;#xe74d;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe74e;</span>
                <div class="name">Shell</div>
                <div class="code-name">&amp;#xe74e;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe74f;</span>
                <div class="name">Python3</div>
                <div class="code-name">&amp;#xe74f;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe750;</span>
                <div class="name">Pyspark</div>
                <div class="code-name">&amp;#xe750;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe751;</span>
                <div class="name">HiveSQL</div>
                <div class="code-name">&amp;#xe751;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe755;</span>
                <div class="name">工作流</div>
                <div class="code-name">&amp;#xe755;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe779;</span>
                <div class="name">接口采集</div>
                <div class="code-name">&amp;#xe779;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe77a;</span>
                <div class="name">离线同步</div>
                <div class="code-name">&amp;#xe77a;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe77b;</span>
                <div class="name">数据质量</div>
                <div class="code-name">&amp;#xe77b;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe77c;</span>
                <div class="name">虚拟节点</div>
                <div class="code-name">&amp;#xe77c;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe62e;</span>
                <div class="name">图层</div>
                <div class="code-name">&amp;#xe62e;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe733;</span>
                <div class="name">离线开发</div>
                <div class="code-name">&amp;#xe733;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe778;</span>
                <div class="name">函数</div>
                <div class="code-name">&amp;#xe778;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe622;</span>
                <div class="name">工作流程</div>
                <div class="code-name">&amp;#xe622;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xedde;</span>
                <div class="name">任务运维</div>
                <div class="code-name">&amp;#xedde;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe783;</span>
                <div class="name">添加-1</div>
                <div class="code-name">&amp;#xe783;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe631;</span>
                <div class="name">Cube</div>
                <div class="code-name">&amp;#xe631;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xec56;</span>
                <div class="name">函数</div>
                <div class="code-name">&amp;#xec56;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe680;</span>
                <div class="name">指标</div>
                <div class="code-name">&amp;#xe680;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe719;</span>
                <div class="name">映射</div>
                <div class="code-name">&amp;#xe719;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe782;</span>
                <div class="name">主键</div>
                <div class="code-name">&amp;#xe782;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xede1;</span>
                <div class="name">展开</div>
                <div class="code-name">&amp;#xede1;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xeddf;</span>
                <div class="name">收起</div>
                <div class="code-name">&amp;#xeddf;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe63e;</span>
                <div class="name">表格</div>
                <div class="code-name">&amp;#xe63e;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe731;</span>
                <div class="name">展开</div>
                <div class="code-name">&amp;#xe731;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe734;</span>
                <div class="name">收起</div>
                <div class="code-name">&amp;#xe734;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe65b;</span>
                <div class="name">全屏</div>
                <div class="code-name">&amp;#xe65b;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe68d;</span>
                <div class="name">筛选</div>
                <div class="code-name">&amp;#xe68d;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe659;</span>
                <div class="name">刷新</div>
                <div class="code-name">&amp;#xe659;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe777;</span>
                <div class="name">箭头</div>
                <div class="code-name">&amp;#xe777;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xebd0;</span>
                <div class="name">数据库</div>
                <div class="code-name">&amp;#xebd0;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe612;</span>
                <div class="name">需求调研</div>
                <div class="code-name">&amp;#xe612;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe607;</span>
                <div class="name">数据质量</div>
                <div class="code-name">&amp;#xe607;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe76f;</span>
                <div class="name">撤回</div>
                <div class="code-name">&amp;#xe76f;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe776;</span>
                <div class="name">运行中_1</div>
                <div class="code-name">&amp;#xe776;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6e0;</span>
                <div class="name">addition_fill</div>
                <div class="code-name">&amp;#xe6e0;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe643;</span>
                <div class="name">更多</div>
                <div class="code-name">&amp;#xe643;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe647;</span>
                <div class="name">冻结</div>
                <div class="code-name">&amp;#xe647;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe656;</span>
                <div class="name">面性文件夹打开</div>
                <div class="code-name">&amp;#xe656;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe657;</span>
                <div class="name">面性文件夹默认</div>
                <div class="code-name">&amp;#xe657;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe773;</span>
                <div class="name">编辑</div>
                <div class="code-name">&amp;#xe773;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe774;</span>
                <div class="name">搜索</div>
                <div class="code-name">&amp;#xe774;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe775;</span>
                <div class="name">标准</div>
                <div class="code-name">&amp;#xe775;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe76c;</span>
                <div class="name">移动</div>
                <div class="code-name">&amp;#xe76c;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe76d;</span>
                <div class="name">下降</div>
                <div class="code-name">&amp;#xe76d;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe76e;</span>
                <div class="name">放大</div>
                <div class="code-name">&amp;#xe76e;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe770;</span>
                <div class="name">回形针</div>
                <div class="code-name">&amp;#xe770;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe771;</span>
                <div class="name">缩小</div>
                <div class="code-name">&amp;#xe771;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe772;</span>
                <div class="name">上升</div>
                <div class="code-name">&amp;#xe772;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xec80;</span>
                <div class="name">取消链接</div>
                <div class="code-name">&amp;#xec80;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe76a;</span>
                <div class="name">帮助文档</div>
                <div class="code-name">&amp;#xe76a;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe76b;</span>
                <div class="name">消息</div>
                <div class="code-name">&amp;#xe76b;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe769;</span>
                <div class="name">添加</div>
                <div class="code-name">&amp;#xe769;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe65c;</span>
                <div class="name">左</div>
                <div class="code-name">&amp;#xe65c;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe65d;</span>
                <div class="name">右</div>
                <div class="code-name">&amp;#xe65d;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe65e;</span>
                <div class="name">下</div>
                <div class="code-name">&amp;#xe65e;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe65f;</span>
                <div class="name">上</div>
                <div class="code-name">&amp;#xe65f;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe768;</span>
                <div class="name">日期</div>
                <div class="code-name">&amp;#xe768;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe75b;</span>
                <div class="name">对号</div>
                <div class="code-name">&amp;#xe75b;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe75c;</span>
                <div class="name">时间</div>
                <div class="code-name">&amp;#xe75c;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe75d;</span>
                <div class="name">疑问提示</div>
                <div class="code-name">&amp;#xe75d;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe75e;</span>
                <div class="name">多行文本</div>
                <div class="code-name">&amp;#xe75e;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe760;</span>
                <div class="name">单选框</div>
                <div class="code-name">&amp;#xe760;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe761;</span>
                <div class="name">单行文本</div>
                <div class="code-name">&amp;#xe761;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe762;</span>
                <div class="name">数字</div>
                <div class="code-name">&amp;#xe762;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe763;</span>
                <div class="name">错号</div>
                <div class="code-name">&amp;#xe763;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe764;</span>
                <div class="name">失败</div>
                <div class="code-name">&amp;#xe764;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe765;</span>
                <div class="name">提示</div>
                <div class="code-name">&amp;#xe765;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe766;</span>
                <div class="name">复选框</div>
                <div class="code-name">&amp;#xe766;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe767;</span>
                <div class="name">下拉框</div>
                <div class="code-name">&amp;#xe767;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xec7f;</span>
                <div class="name">插入链接</div>
                <div class="code-name">&amp;#xec7f;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe64a;</span>
                <div class="name">上传</div>
                <div class="code-name">&amp;#xe64a;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe653;</span>
                <div class="name">新建文件夹</div>
                <div class="code-name">&amp;#xe653;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe682;</span>
                <div class="name">存储</div>
                <div class="code-name">&amp;#xe682;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe716;</span>
                <div class="name">下载</div>
                <div class="code-name">&amp;#xe716;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe627;</span>
                <div class="name">删除</div>
                <div class="code-name">&amp;#xe627;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe641;</span>
                <div class="name">成功</div>
                <div class="code-name">&amp;#xe641;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe658;</span>
                <div class="name">警告</div>
                <div class="code-name">&amp;#xe658;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe712;</span>
                <div class="name">待办</div>
                <div class="code-name">&amp;#xe712;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe713;</span>
                <div class="name">草稿</div>
                <div class="code-name">&amp;#xe713;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe714;</span>
                <div class="name">待开发</div>
                <div class="code-name">&amp;#xe714;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe715;</span>
                <div class="name">添加</div>
                <div class="code-name">&amp;#xe715;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe759;</span>
                <div class="name">复制</div>
                <div class="code-name">&amp;#xe759;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe75a;</span>
                <div class="name">更多</div>
                <div class="code-name">&amp;#xe75a;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe689;</span>
                <div class="name">查看</div>
                <div class="code-name">&amp;#xe689;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe75f;</span>
                <div class="name">隐藏</div>
                <div class="code-name">&amp;#xe75f;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe639;</span>
                <div class="name">用户</div>
                <div class="code-name">&amp;#xe639;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6f2;</span>
                <div class="name">展开</div>
                <div class="code-name">&amp;#xe6f2;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6f3;</span>
                <div class="name">收起</div>
                <div class="code-name">&amp;#xe6f3;</div>
              </li>
          
          </ul>
          <div class="article markdown">
          <h2 id="unicode-">Unicode 引用</h2>
          <hr>

          <p>Unicode 是字体在网页端最原始的应用方式，特点是：</p>
          <ul>
            <li>支持按字体的方式去动态调整图标大小，颜色等等。</li>
            <li>默认情况下不支持多色，直接添加多色图标会自动去色。</li>
          </ul>
          <blockquote>
            <p>注意：新版 iconfont 支持两种方式引用多色图标：SVG symbol 引用方式和彩色字体图标模式。（使用彩色字体图标需要在「编辑项目」中开启「彩色」选项后并重新生成。）</p>
          </blockquote>
          <p>Unicode 使用步骤如下：</p>
          <h3 id="-font-face">第一步：拷贝项目下面生成的 <code>@font-face</code></h3>
<pre><code class="language-css"
>@font-face {
  font-family: 'iconfont';
  src: url('iconfont.woff2?t=1701407991151') format('woff2'),
       url('iconfont.woff?t=1701407991151') format('woff'),
       url('iconfont.ttf?t=1701407991151') format('truetype');
}
</code></pre>
          <h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3>
<pre><code class="language-css"
>.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
</code></pre>
          <h3 id="-">第三步：挑选相应图标并获取字体编码，应用于页面</h3>
<pre>
<code class="language-html"
>&lt;span class="iconfont"&gt;&amp;#x33;&lt;/span&gt;
</code></pre>
          <blockquote>
            <p>"iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p>
          </blockquote>
          </div>
      </div>
      <div class="content font-class">
        <ul class="icon_lists dib-box">
          
          <li class="dib">
            <span class="icon iconfont icon-guidang"></span>
            <div class="name">
              归档
            </div>
            <div class="code-name">.icon-guidang
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-jiexi"></span>
            <div class="name">
              解析
            </div>
            <div class="code-name">.icon-jiexi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-zhibiaosheji"></span>
            <div class="name">
              指标设计
            </div>
            <div class="code-name">.icon-zhibiaosheji
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-bianji1"></span>
            <div class="name">
              编辑
            </div>
            <div class="code-name">.icon-bianji1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-shanchu1"></span>
            <div class="name">
              删除
            </div>
            <div class="code-name">.icon-shanchu1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-yanjing"></span>
            <div class="name">
              眼睛
            </div>
            <div class="code-name">.icon-yanjing
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-guanlian"></span>
            <div class="name">
              关联
            </div>
            <div class="code-name">.icon-guanlian
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-shishikaifa"></span>
            <div class="name">
              实时开发_1
            </div>
            <div class="code-name">.icon-shishikaifa
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-lixiankaifa1"></span>
            <div class="name">
              离线开发_1
            </div>
            <div class="code-name">.icon-lixiankaifa1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-shaixuan-fill"></span>
            <div class="name">
              筛选-fill
            </div>
            <div class="code-name">.icon-shaixuan-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-caret-down"></span>
            <div class="name">
              caret-down
            </div>
            <div class="code-name">.icon-caret-down
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-caret-up"></span>
            <div class="name">
              caret-up
            </div>
            <div class="code-name">.icon-caret-up
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-caret-right"></span>
            <div class="name">
              caret-right
            </div>
            <div class="code-name">.icon-caret-right
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-caret-left"></span>
            <div class="name">
              caret-left
            </div>
            <div class="code-name">.icon-caret-left
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-filter"></span>
            <div class="name">
              filter
            </div>
            <div class="code-name">.icon-filter
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-jianmofangzhen-fill"></span>
            <div class="name">
              建模仿真-fill
            </div>
            <div class="code-name">.icon-jianmofangzhen-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-pinzhigongyingshang"></span>
            <div class="name">
              品质供应商
            </div>
            <div class="code-name">.icon-pinzhigongyingshang
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-caigou"></span>
            <div class="name">
              05采购
            </div>
            <div class="code-name">.icon-caigou
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-gongchengshi"></span>
            <div class="name">
              工程师
            </div>
            <div class="code-name">.icon-gongchengshi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-sheji"></span>
            <div class="name">
              设计
            </div>
            <div class="code-name">.icon-sheji
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-shouhoupeijianPRshenqing-03"></span>
            <div class="name">
              售后配件PR申请-03
            </div>
            <div class="code-name">.icon-shouhoupeijianPRshenqing-03
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-zhizaoye"></span>
            <div class="name">
              制造业
            </div>
            <div class="code-name">.icon-zhizaoye
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-export"></span>
            <div class="name">
              export
            </div>
            <div class="code-name">.icon-export
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-Import"></span>
            <div class="name">
              Import
            </div>
            <div class="code-name">.icon-Import
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-shoucang-fill"></span>
            <div class="name">
              收藏-fill
            </div>
            <div class="code-name">.icon-shoucang-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-bijiao"></span>
            <div class="name">
              比较
            </div>
            <div class="code-name">.icon-bijiao
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-shoucang"></span>
            <div class="name">
              收藏
            </div>
            <div class="code-name">.icon-shoucang
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-paixu"></span>
            <div class="name">
              排序
            </div>
            <div class="code-name">.icon-paixu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-kapianliebiao"></span>
            <div class="name">
              卡片列表
            </div>
            <div class="code-name">.icon-kapianliebiao
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-jicheng"></span>
            <div class="name">
              集成
            </div>
            <div class="code-name">.icon-jicheng
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-shijichicun"></span>
            <div class="name">
              实际尺寸
            </div>
            <div class="code-name">.icon-shijichicun
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-shiyinghuabu"></span>
            <div class="name">
              适应画布
            </div>
            <div class="code-name">.icon-shiyinghuabu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-zhexiantu-xianxing"></span>
            <div class="name">
              409折线图-线性
            </div>
            <div class="code-name">.icon-zhexiantu-xianxing
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-chenggong_1"></span>
            <div class="name">
              成功_1
            </div>
            <div class="code-name">.icon-chenggong_1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-cuowu"></span>
            <div class="name">
              错误
            </div>
            <div class="code-name">.icon-cuowu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-yunhangzhong"></span>
            <div class="name">
              运行中
            </div>
            <div class="code-name">.icon-yunhangzhong
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-weixuan"></span>
            <div class="name">
              未选
            </div>
            <div class="code-name">.icon-weixuan
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-xiangdaomoshi"></span>
            <div class="name">
              向导模式
            </div>
            <div class="code-name">.icon-xiangdaomoshi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-ziduanxinxi"></span>
            <div class="name">
              字段信息
            </div>
            <div class="code-name">.icon-ziduanxinxi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-xitong"></span>
            <div class="name">
              系统
            </div>
            <div class="code-name">.icon-xitong
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-hangliezhuanhuan"></span>
            <div class="name">
              行列转换
            </div>
            <div class="code-name">.icon-hangliezhuanhuan
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-shujuguanlian"></span>
            <div class="name">
              数据关联
            </div>
            <div class="code-name">.icon-shujuguanlian
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-gaojing"></span>
            <div class="name">
              告警
            </div>
            <div class="code-name">.icon-gaojing
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-shujushuchu"></span>
            <div class="name">
              数据输出
            </div>
            <div class="code-name">.icon-shujushuchu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-liebiaoxinxi"></span>
            <div class="name">
              列表信息
            </div>
            <div class="code-name">.icon-liebiaoxinxi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-shujuqingxi"></span>
            <div class="name">
              数据清洗
            </div>
            <div class="code-name">.icon-shujuqingxi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-Impala"></span>
            <div class="name">
              Impala
            </div>
            <div class="code-name">.icon-Impala
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-yifabu"></span>
            <div class="name">
              已发布
            </div>
            <div class="code-name">.icon-yifabu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-weiyunhang"></span>
            <div class="name">
              未运行
            </div>
            <div class="code-name">.icon-weiyunhang
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-back"></span>
            <div class="name">
              返回
            </div>
            <div class="code-name">.icon-back
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-logout"></span>
            <div class="name">
              logout
            </div>
            <div class="code-name">.icon-logout
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-login"></span>
            <div class="name">
              login
            </div>
            <div class="code-name">.icon-login
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-Java"></span>
            <div class="name">
              Java
            </div>
            <div class="code-name">.icon-Java
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-shangchuangongju"></span>
            <div class="name">
              上传工具
            </div>
            <div class="code-name">.icon-shangchuangongju
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-fenqu"></span>
            <div class="name">
              分区
            </div>
            <div class="code-name">.icon-fenqu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-yinyong1"></span>
            <div class="name">
              引用
            </div>
            <div class="code-name">.icon-yinyong1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-fangda1"></span>
            <div class="name">
              放大
            </div>
            <div class="code-name">.icon-fangda1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-suoxiao1"></span>
            <div class="name">
              缩小
            </div>
            <div class="code-name">.icon-suoxiao1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-baocun"></span>
            <div class="name">
              保存
            </div>
            <div class="code-name">.icon-baocun
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-jiesuo"></span>
            <div class="name">
              解锁
            </div>
            <div class="code-name">.icon-jiesuo
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-suo"></span>
            <div class="name">
              锁
            </div>
            <div class="code-name">.icon-suo
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-yunhang"></span>
            <div class="name">
              运行
            </div>
            <div class="code-name">.icon-yunhang
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-tingzhi"></span>
            <div class="name">
              停止
            </div>
            <div class="code-name">.icon-tingzhi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-buju"></span>
            <div class="name">
              布局
            </div>
            <div class="code-name">.icon-buju
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-daoru"></span>
            <div class="name">
              导入
            </div>
            <div class="code-name">.icon-daoru
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-duoxuan"></span>
            <div class="name">
              多选
            </div>
            <div class="code-name">.icon-duoxuan
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-quanxuan"></span>
            <div class="name">
              全选
            </div>
            <div class="code-name">.icon-quanxuan
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-daimajiancha"></span>
            <div class="name">
              代码检查
            </div>
            <div class="code-name">.icon-daimajiancha
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-Flinkrenwu"></span>
            <div class="name">
              Flink任务
            </div>
            <div class="code-name">.icon-Flinkrenwu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-FlinkSQLrenwu"></span>
            <div class="name">
              FlinkSQL任务
            </div>
            <div class="code-name">.icon-FlinkSQLrenwu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-MapRduce"></span>
            <div class="name">
              MapRduce
            </div>
            <div class="code-name">.icon-MapRduce
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-Python2"></span>
            <div class="name">
              Python2
            </div>
            <div class="code-name">.icon-Python2
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-Shell"></span>
            <div class="name">
              Shell
            </div>
            <div class="code-name">.icon-Shell
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-Python3"></span>
            <div class="name">
              Python3
            </div>
            <div class="code-name">.icon-Python3
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-Pyspark"></span>
            <div class="name">
              Pyspark
            </div>
            <div class="code-name">.icon-Pyspark
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-HiveSQL"></span>
            <div class="name">
              HiveSQL
            </div>
            <div class="code-name">.icon-HiveSQL
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-gongzuoliu"></span>
            <div class="name">
              工作流
            </div>
            <div class="code-name">.icon-gongzuoliu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-jiekoucaiji"></span>
            <div class="name">
              接口采集
            </div>
            <div class="code-name">.icon-jiekoucaiji
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-lixiantongbu"></span>
            <div class="name">
              离线同步
            </div>
            <div class="code-name">.icon-lixiantongbu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-shujuzhiliang1"></span>
            <div class="name">
              数据质量
            </div>
            <div class="code-name">.icon-shujuzhiliang1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-xunijiedian"></span>
            <div class="name">
              虚拟节点
            </div>
            <div class="code-name">.icon-xunijiedian
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-tuceng"></span>
            <div class="name">
              图层
            </div>
            <div class="code-name">.icon-tuceng
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-lixiankaifa"></span>
            <div class="name">
              离线开发
            </div>
            <div class="code-name">.icon-lixiankaifa
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-hanshu1"></span>
            <div class="name">
              函数
            </div>
            <div class="code-name">.icon-hanshu1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-gongzuoliucheng"></span>
            <div class="name">
              工作流程
            </div>
            <div class="code-name">.icon-gongzuoliucheng
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-renwuyunwei"></span>
            <div class="name">
              任务运维
            </div>
            <div class="code-name">.icon-renwuyunwei
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-tianjia-1"></span>
            <div class="name">
              添加-1
            </div>
            <div class="code-name">.icon-tianjia-1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-Cube"></span>
            <div class="name">
              Cube
            </div>
            <div class="code-name">.icon-Cube
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-hanshu"></span>
            <div class="name">
              函数
            </div>
            <div class="code-name">.icon-hanshu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-zhibiao"></span>
            <div class="name">
              指标
            </div>
            <div class="code-name">.icon-zhibiao
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-yingshe1"></span>
            <div class="name">
              映射
            </div>
            <div class="code-name">.icon-yingshe1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-zhujian"></span>
            <div class="name">
              主键
            </div>
            <div class="code-name">.icon-zhujian
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-zhankai1-copy"></span>
            <div class="name">
              展开
            </div>
            <div class="code-name">.icon-zhankai1-copy
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-shouqi1-copy"></span>
            <div class="name">
              收起
            </div>
            <div class="code-name">.icon-shouqi1-copy
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-biaoge"></span>
            <div class="name">
              表格
            </div>
            <div class="code-name">.icon-biaoge
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-zhankai1"></span>
            <div class="name">
              展开
            </div>
            <div class="code-name">.icon-zhankai1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-shouqi1"></span>
            <div class="name">
              收起
            </div>
            <div class="code-name">.icon-shouqi1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-quanping"></span>
            <div class="name">
              全屏
            </div>
            <div class="code-name">.icon-quanping
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-shaixuan"></span>
            <div class="name">
              筛选
            </div>
            <div class="code-name">.icon-shaixuan
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-shuaxin"></span>
            <div class="name">
              刷新
            </div>
            <div class="code-name">.icon-shuaxin
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-jiantou"></span>
            <div class="name">
              箭头
            </div>
            <div class="code-name">.icon-jiantou
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-sever-fill"></span>
            <div class="name">
              数据库
            </div>
            <div class="code-name">.icon-sever-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-xuqiutiaoyan"></span>
            <div class="name">
              需求调研
            </div>
            <div class="code-name">.icon-xuqiutiaoyan
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-shujuzhiliang"></span>
            <div class="name">
              数据质量
            </div>
            <div class="code-name">.icon-shujuzhiliang
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-chehui"></span>
            <div class="name">
              撤回
            </div>
            <div class="code-name">.icon-chehui
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-yunhangzhong_1"></span>
            <div class="name">
              运行中_1
            </div>
            <div class="code-name">.icon-yunhangzhong_1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-addition_fill"></span>
            <div class="name">
              addition_fill
            </div>
            <div class="code-name">.icon-addition_fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-gengduo"></span>
            <div class="name">
              更多
            </div>
            <div class="code-name">.icon-gengduo
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-dongjie"></span>
            <div class="name">
              冻结
            </div>
            <div class="code-name">.icon-dongjie
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-mianxingwenjianjiadakai"></span>
            <div class="name">
              面性文件夹打开
            </div>
            <div class="code-name">.icon-mianxingwenjianjiadakai
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-mianxingwenjianjiamoren"></span>
            <div class="name">
              面性文件夹默认
            </div>
            <div class="code-name">.icon-mianxingwenjianjiamoren
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-bianji"></span>
            <div class="name">
              编辑
            </div>
            <div class="code-name">.icon-bianji
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-sousuo"></span>
            <div class="name">
              搜索
            </div>
            <div class="code-name">.icon-sousuo
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-biaozhun"></span>
            <div class="name">
              标准
            </div>
            <div class="code-name">.icon-biaozhun
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-yidong"></span>
            <div class="name">
              移动
            </div>
            <div class="code-name">.icon-yidong
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-xiajiang"></span>
            <div class="name">
              下降
            </div>
            <div class="code-name">.icon-xiajiang
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-fangda"></span>
            <div class="name">
              放大
            </div>
            <div class="code-name">.icon-fangda
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-huixingzhen1"></span>
            <div class="name">
              回形针
            </div>
            <div class="code-name">.icon-huixingzhen1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-suoxiao"></span>
            <div class="name">
              缩小
            </div>
            <div class="code-name">.icon-suoxiao
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-shangsheng"></span>
            <div class="name">
              上升
            </div>
            <div class="code-name">.icon-shangsheng
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-quxiaolianjie"></span>
            <div class="name">
              取消链接
            </div>
            <div class="code-name">.icon-quxiaolianjie
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-bangzhuwendang"></span>
            <div class="name">
              帮助文档
            </div>
            <div class="code-name">.icon-bangzhuwendang
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-xiaoxi"></span>
            <div class="name">
              消息
            </div>
            <div class="code-name">.icon-xiaoxi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-tianjia"></span>
            <div class="name">
              添加
            </div>
            <div class="code-name">.icon-tianjia
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-zuo"></span>
            <div class="name">
              左
            </div>
            <div class="code-name">.icon-zuo
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-you"></span>
            <div class="name">
              右
            </div>
            <div class="code-name">.icon-you
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-xia"></span>
            <div class="name">
              下
            </div>
            <div class="code-name">.icon-xia
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-shang"></span>
            <div class="name">
              上
            </div>
            <div class="code-name">.icon-shang
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-riqi"></span>
            <div class="name">
              日期
            </div>
            <div class="code-name">.icon-riqi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-duihao"></span>
            <div class="name">
              对号
            </div>
            <div class="code-name">.icon-duihao
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-shijian"></span>
            <div class="name">
              时间
            </div>
            <div class="code-name">.icon-shijian
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-yiwentishi"></span>
            <div class="name">
              疑问提示
            </div>
            <div class="code-name">.icon-yiwentishi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-duohangwenben"></span>
            <div class="name">
              多行文本
            </div>
            <div class="code-name">.icon-duohangwenben
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-danxuankuang"></span>
            <div class="name">
              单选框
            </div>
            <div class="code-name">.icon-danxuankuang
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-danhangwenben"></span>
            <div class="name">
              单行文本
            </div>
            <div class="code-name">.icon-danhangwenben
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-shuzi"></span>
            <div class="name">
              数字
            </div>
            <div class="code-name">.icon-shuzi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-cuohao"></span>
            <div class="name">
              错号
            </div>
            <div class="code-name">.icon-cuohao
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-shibai1"></span>
            <div class="name">
              失败
            </div>
            <div class="code-name">.icon-shibai1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-tishi"></span>
            <div class="name">
              提示
            </div>
            <div class="code-name">.icon-tishi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-fuxuankuang"></span>
            <div class="name">
              复选框
            </div>
            <div class="code-name">.icon-fuxuankuang
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-xialakuang"></span>
            <div class="name">
              下拉框
            </div>
            <div class="code-name">.icon-xialakuang
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-charulianjie"></span>
            <div class="name">
              插入链接
            </div>
            <div class="code-name">.icon-charulianjie
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-shangchuan"></span>
            <div class="name">
              上传
            </div>
            <div class="code-name">.icon-shangchuan
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-xinjianwenjianjia"></span>
            <div class="name">
              新建文件夹
            </div>
            <div class="code-name">.icon-xinjianwenjianjia
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-cunchu"></span>
            <div class="name">
              存储
            </div>
            <div class="code-name">.icon-cunchu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-xiazai"></span>
            <div class="name">
              下载
            </div>
            <div class="code-name">.icon-xiazai
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-shanchu"></span>
            <div class="name">
              删除
            </div>
            <div class="code-name">.icon-shanchu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-chenggong"></span>
            <div class="name">
              成功
            </div>
            <div class="code-name">.icon-chenggong
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-jinggao"></span>
            <div class="name">
              警告
            </div>
            <div class="code-name">.icon-jinggao
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-daiban"></span>
            <div class="name">
              待办
            </div>
            <div class="code-name">.icon-daiban
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-caogao"></span>
            <div class="name">
              草稿
            </div>
            <div class="code-name">.icon-caogao
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-daikaifa"></span>
            <div class="name">
              待开发
            </div>
            <div class="code-name">.icon-daikaifa
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-tianjia1"></span>
            <div class="name">
              添加
            </div>
            <div class="code-name">.icon-tianjia1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-fuzhi"></span>
            <div class="name">
              复制
            </div>
            <div class="code-name">.icon-fuzhi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-more"></span>
            <div class="name">
              更多
            </div>
            <div class="code-name">.icon-more
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-chakan"></span>
            <div class="name">
              查看
            </div>
            <div class="code-name">.icon-chakan
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-yincang"></span>
            <div class="name">
              隐藏
            </div>
            <div class="code-name">.icon-yincang
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-yonghu"></span>
            <div class="name">
              用户
            </div>
            <div class="code-name">.icon-yonghu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-kstp-zhankai"></span>
            <div class="name">
              展开
            </div>
            <div class="code-name">.icon-kstp-zhankai
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-kstp-shouqi"></span>
            <div class="name">
              收起
            </div>
            <div class="code-name">.icon-kstp-shouqi
            </div>
          </li>
          
        </ul>
        <div class="article markdown">
        <h2 id="font-class-">font-class 引用</h2>
        <hr>

        <p>font-class 是 Unicode 使用方式的一种变种，主要是解决 Unicode 书写不直观，语意不明确的问题。</p>
        <p>与 Unicode 使用方式相比，具有如下特点：</p>
        <ul>
          <li>相比于 Unicode 语意明确，书写更直观。可以很容易分辨这个 icon 是什么。</li>
          <li>因为使用 class 来定义图标，所以当要替换图标时，只需要修改 class 里面的 Unicode 引用。</li>
        </ul>
        <p>使用步骤如下：</p>
        <h3 id="-fontclass-">第一步：引入项目下面生成的 fontclass 代码：</h3>
<pre><code class="language-html">&lt;link rel="stylesheet" href="./iconfont.css"&gt;
</code></pre>
        <h3 id="-">第二步：挑选相应图标并获取类名，应用于页面：</h3>
<pre><code class="language-html">&lt;span class="iconfont icon-xxx"&gt;&lt;/span&gt;
</code></pre>
        <blockquote>
          <p>"
            iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p>
        </blockquote>
      </div>
      </div>
      <div class="content symbol">
          <ul class="icon_lists dib-box">
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-guidang"></use>
                </svg>
                <div class="name">归档</div>
                <div class="code-name">#icon-guidang</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-jiexi"></use>
                </svg>
                <div class="name">解析</div>
                <div class="code-name">#icon-jiexi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-zhibiaosheji"></use>
                </svg>
                <div class="name">指标设计</div>
                <div class="code-name">#icon-zhibiaosheji</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-bianji1"></use>
                </svg>
                <div class="name">编辑</div>
                <div class="code-name">#icon-bianji1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-shanchu1"></use>
                </svg>
                <div class="name">删除</div>
                <div class="code-name">#icon-shanchu1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-yanjing"></use>
                </svg>
                <div class="name">眼睛</div>
                <div class="code-name">#icon-yanjing</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-guanlian"></use>
                </svg>
                <div class="name">关联</div>
                <div class="code-name">#icon-guanlian</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-shishikaifa"></use>
                </svg>
                <div class="name">实时开发_1</div>
                <div class="code-name">#icon-shishikaifa</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-lixiankaifa1"></use>
                </svg>
                <div class="name">离线开发_1</div>
                <div class="code-name">#icon-lixiankaifa1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-shaixuan-fill"></use>
                </svg>
                <div class="name">筛选-fill</div>
                <div class="code-name">#icon-shaixuan-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-caret-down"></use>
                </svg>
                <div class="name">caret-down</div>
                <div class="code-name">#icon-caret-down</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-caret-up"></use>
                </svg>
                <div class="name">caret-up</div>
                <div class="code-name">#icon-caret-up</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-caret-right"></use>
                </svg>
                <div class="name">caret-right</div>
                <div class="code-name">#icon-caret-right</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-caret-left"></use>
                </svg>
                <div class="name">caret-left</div>
                <div class="code-name">#icon-caret-left</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-filter"></use>
                </svg>
                <div class="name">filter</div>
                <div class="code-name">#icon-filter</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-jianmofangzhen-fill"></use>
                </svg>
                <div class="name">建模仿真-fill</div>
                <div class="code-name">#icon-jianmofangzhen-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-pinzhigongyingshang"></use>
                </svg>
                <div class="name">品质供应商</div>
                <div class="code-name">#icon-pinzhigongyingshang</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-caigou"></use>
                </svg>
                <div class="name">05采购</div>
                <div class="code-name">#icon-caigou</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-gongchengshi"></use>
                </svg>
                <div class="name">工程师</div>
                <div class="code-name">#icon-gongchengshi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-sheji"></use>
                </svg>
                <div class="name">设计</div>
                <div class="code-name">#icon-sheji</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-shouhoupeijianPRshenqing-03"></use>
                </svg>
                <div class="name">售后配件PR申请-03</div>
                <div class="code-name">#icon-shouhoupeijianPRshenqing-03</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-zhizaoye"></use>
                </svg>
                <div class="name">制造业</div>
                <div class="code-name">#icon-zhizaoye</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-export"></use>
                </svg>
                <div class="name">export</div>
                <div class="code-name">#icon-export</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-Import"></use>
                </svg>
                <div class="name">Import</div>
                <div class="code-name">#icon-Import</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-shoucang-fill"></use>
                </svg>
                <div class="name">收藏-fill</div>
                <div class="code-name">#icon-shoucang-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-bijiao"></use>
                </svg>
                <div class="name">比较</div>
                <div class="code-name">#icon-bijiao</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-shoucang"></use>
                </svg>
                <div class="name">收藏</div>
                <div class="code-name">#icon-shoucang</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-paixu"></use>
                </svg>
                <div class="name">排序</div>
                <div class="code-name">#icon-paixu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-kapianliebiao"></use>
                </svg>
                <div class="name">卡片列表</div>
                <div class="code-name">#icon-kapianliebiao</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-jicheng"></use>
                </svg>
                <div class="name">集成</div>
                <div class="code-name">#icon-jicheng</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-shijichicun"></use>
                </svg>
                <div class="name">实际尺寸</div>
                <div class="code-name">#icon-shijichicun</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-shiyinghuabu"></use>
                </svg>
                <div class="name">适应画布</div>
                <div class="code-name">#icon-shiyinghuabu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-zhexiantu-xianxing"></use>
                </svg>
                <div class="name">409折线图-线性</div>
                <div class="code-name">#icon-zhexiantu-xianxing</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-chenggong_1"></use>
                </svg>
                <div class="name">成功_1</div>
                <div class="code-name">#icon-chenggong_1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-cuowu"></use>
                </svg>
                <div class="name">错误</div>
                <div class="code-name">#icon-cuowu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-yunhangzhong"></use>
                </svg>
                <div class="name">运行中</div>
                <div class="code-name">#icon-yunhangzhong</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-weixuan"></use>
                </svg>
                <div class="name">未选</div>
                <div class="code-name">#icon-weixuan</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-xiangdaomoshi"></use>
                </svg>
                <div class="name">向导模式</div>
                <div class="code-name">#icon-xiangdaomoshi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-ziduanxinxi"></use>
                </svg>
                <div class="name">字段信息</div>
                <div class="code-name">#icon-ziduanxinxi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-xitong"></use>
                </svg>
                <div class="name">系统</div>
                <div class="code-name">#icon-xitong</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-hangliezhuanhuan"></use>
                </svg>
                <div class="name">行列转换</div>
                <div class="code-name">#icon-hangliezhuanhuan</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-shujuguanlian"></use>
                </svg>
                <div class="name">数据关联</div>
                <div class="code-name">#icon-shujuguanlian</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-gaojing"></use>
                </svg>
                <div class="name">告警</div>
                <div class="code-name">#icon-gaojing</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-shujushuchu"></use>
                </svg>
                <div class="name">数据输出</div>
                <div class="code-name">#icon-shujushuchu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-liebiaoxinxi"></use>
                </svg>
                <div class="name">列表信息</div>
                <div class="code-name">#icon-liebiaoxinxi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-shujuqingxi"></use>
                </svg>
                <div class="name">数据清洗</div>
                <div class="code-name">#icon-shujuqingxi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-Impala"></use>
                </svg>
                <div class="name">Impala</div>
                <div class="code-name">#icon-Impala</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-yifabu"></use>
                </svg>
                <div class="name">已发布</div>
                <div class="code-name">#icon-yifabu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-weiyunhang"></use>
                </svg>
                <div class="name">未运行</div>
                <div class="code-name">#icon-weiyunhang</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-back"></use>
                </svg>
                <div class="name">返回</div>
                <div class="code-name">#icon-back</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-logout"></use>
                </svg>
                <div class="name">logout</div>
                <div class="code-name">#icon-logout</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-login"></use>
                </svg>
                <div class="name">login</div>
                <div class="code-name">#icon-login</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-Java"></use>
                </svg>
                <div class="name">Java</div>
                <div class="code-name">#icon-Java</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-shangchuangongju"></use>
                </svg>
                <div class="name">上传工具</div>
                <div class="code-name">#icon-shangchuangongju</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-fenqu"></use>
                </svg>
                <div class="name">分区</div>
                <div class="code-name">#icon-fenqu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-yinyong1"></use>
                </svg>
                <div class="name">引用</div>
                <div class="code-name">#icon-yinyong1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-fangda1"></use>
                </svg>
                <div class="name">放大</div>
                <div class="code-name">#icon-fangda1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-suoxiao1"></use>
                </svg>
                <div class="name">缩小</div>
                <div class="code-name">#icon-suoxiao1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-baocun"></use>
                </svg>
                <div class="name">保存</div>
                <div class="code-name">#icon-baocun</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-jiesuo"></use>
                </svg>
                <div class="name">解锁</div>
                <div class="code-name">#icon-jiesuo</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-suo"></use>
                </svg>
                <div class="name">锁</div>
                <div class="code-name">#icon-suo</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-yunhang"></use>
                </svg>
                <div class="name">运行</div>
                <div class="code-name">#icon-yunhang</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-tingzhi"></use>
                </svg>
                <div class="name">停止</div>
                <div class="code-name">#icon-tingzhi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-buju"></use>
                </svg>
                <div class="name">布局</div>
                <div class="code-name">#icon-buju</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-daoru"></use>
                </svg>
                <div class="name">导入</div>
                <div class="code-name">#icon-daoru</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-duoxuan"></use>
                </svg>
                <div class="name">多选</div>
                <div class="code-name">#icon-duoxuan</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-quanxuan"></use>
                </svg>
                <div class="name">全选</div>
                <div class="code-name">#icon-quanxuan</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-daimajiancha"></use>
                </svg>
                <div class="name">代码检查</div>
                <div class="code-name">#icon-daimajiancha</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-Flinkrenwu"></use>
                </svg>
                <div class="name">Flink任务</div>
                <div class="code-name">#icon-Flinkrenwu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-FlinkSQLrenwu"></use>
                </svg>
                <div class="name">FlinkSQL任务</div>
                <div class="code-name">#icon-FlinkSQLrenwu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-MapRduce"></use>
                </svg>
                <div class="name">MapRduce</div>
                <div class="code-name">#icon-MapRduce</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-Python2"></use>
                </svg>
                <div class="name">Python2</div>
                <div class="code-name">#icon-Python2</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-Shell"></use>
                </svg>
                <div class="name">Shell</div>
                <div class="code-name">#icon-Shell</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-Python3"></use>
                </svg>
                <div class="name">Python3</div>
                <div class="code-name">#icon-Python3</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-Pyspark"></use>
                </svg>
                <div class="name">Pyspark</div>
                <div class="code-name">#icon-Pyspark</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-HiveSQL"></use>
                </svg>
                <div class="name">HiveSQL</div>
                <div class="code-name">#icon-HiveSQL</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-gongzuoliu"></use>
                </svg>
                <div class="name">工作流</div>
                <div class="code-name">#icon-gongzuoliu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-jiekoucaiji"></use>
                </svg>
                <div class="name">接口采集</div>
                <div class="code-name">#icon-jiekoucaiji</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-lixiantongbu"></use>
                </svg>
                <div class="name">离线同步</div>
                <div class="code-name">#icon-lixiantongbu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-shujuzhiliang1"></use>
                </svg>
                <div class="name">数据质量</div>
                <div class="code-name">#icon-shujuzhiliang1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-xunijiedian"></use>
                </svg>
                <div class="name">虚拟节点</div>
                <div class="code-name">#icon-xunijiedian</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-tuceng"></use>
                </svg>
                <div class="name">图层</div>
                <div class="code-name">#icon-tuceng</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-lixiankaifa"></use>
                </svg>
                <div class="name">离线开发</div>
                <div class="code-name">#icon-lixiankaifa</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-hanshu1"></use>
                </svg>
                <div class="name">函数</div>
                <div class="code-name">#icon-hanshu1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-gongzuoliucheng"></use>
                </svg>
                <div class="name">工作流程</div>
                <div class="code-name">#icon-gongzuoliucheng</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-renwuyunwei"></use>
                </svg>
                <div class="name">任务运维</div>
                <div class="code-name">#icon-renwuyunwei</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-tianjia-1"></use>
                </svg>
                <div class="name">添加-1</div>
                <div class="code-name">#icon-tianjia-1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-Cube"></use>
                </svg>
                <div class="name">Cube</div>
                <div class="code-name">#icon-Cube</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-hanshu"></use>
                </svg>
                <div class="name">函数</div>
                <div class="code-name">#icon-hanshu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-zhibiao"></use>
                </svg>
                <div class="name">指标</div>
                <div class="code-name">#icon-zhibiao</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-yingshe1"></use>
                </svg>
                <div class="name">映射</div>
                <div class="code-name">#icon-yingshe1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-zhujian"></use>
                </svg>
                <div class="name">主键</div>
                <div class="code-name">#icon-zhujian</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-zhankai1-copy"></use>
                </svg>
                <div class="name">展开</div>
                <div class="code-name">#icon-zhankai1-copy</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-shouqi1-copy"></use>
                </svg>
                <div class="name">收起</div>
                <div class="code-name">#icon-shouqi1-copy</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-biaoge"></use>
                </svg>
                <div class="name">表格</div>
                <div class="code-name">#icon-biaoge</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-zhankai1"></use>
                </svg>
                <div class="name">展开</div>
                <div class="code-name">#icon-zhankai1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-shouqi1"></use>
                </svg>
                <div class="name">收起</div>
                <div class="code-name">#icon-shouqi1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-quanping"></use>
                </svg>
                <div class="name">全屏</div>
                <div class="code-name">#icon-quanping</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-shaixuan"></use>
                </svg>
                <div class="name">筛选</div>
                <div class="code-name">#icon-shaixuan</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-shuaxin"></use>
                </svg>
                <div class="name">刷新</div>
                <div class="code-name">#icon-shuaxin</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-jiantou"></use>
                </svg>
                <div class="name">箭头</div>
                <div class="code-name">#icon-jiantou</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-sever-fill"></use>
                </svg>
                <div class="name">数据库</div>
                <div class="code-name">#icon-sever-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-xuqiutiaoyan"></use>
                </svg>
                <div class="name">需求调研</div>
                <div class="code-name">#icon-xuqiutiaoyan</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-shujuzhiliang"></use>
                </svg>
                <div class="name">数据质量</div>
                <div class="code-name">#icon-shujuzhiliang</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-chehui"></use>
                </svg>
                <div class="name">撤回</div>
                <div class="code-name">#icon-chehui</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-yunhangzhong_1"></use>
                </svg>
                <div class="name">运行中_1</div>
                <div class="code-name">#icon-yunhangzhong_1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-addition_fill"></use>
                </svg>
                <div class="name">addition_fill</div>
                <div class="code-name">#icon-addition_fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-gengduo"></use>
                </svg>
                <div class="name">更多</div>
                <div class="code-name">#icon-gengduo</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-dongjie"></use>
                </svg>
                <div class="name">冻结</div>
                <div class="code-name">#icon-dongjie</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-mianxingwenjianjiadakai"></use>
                </svg>
                <div class="name">面性文件夹打开</div>
                <div class="code-name">#icon-mianxingwenjianjiadakai</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-mianxingwenjianjiamoren"></use>
                </svg>
                <div class="name">面性文件夹默认</div>
                <div class="code-name">#icon-mianxingwenjianjiamoren</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-bianji"></use>
                </svg>
                <div class="name">编辑</div>
                <div class="code-name">#icon-bianji</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-sousuo"></use>
                </svg>
                <div class="name">搜索</div>
                <div class="code-name">#icon-sousuo</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-biaozhun"></use>
                </svg>
                <div class="name">标准</div>
                <div class="code-name">#icon-biaozhun</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-yidong"></use>
                </svg>
                <div class="name">移动</div>
                <div class="code-name">#icon-yidong</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-xiajiang"></use>
                </svg>
                <div class="name">下降</div>
                <div class="code-name">#icon-xiajiang</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-fangda"></use>
                </svg>
                <div class="name">放大</div>
                <div class="code-name">#icon-fangda</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-huixingzhen1"></use>
                </svg>
                <div class="name">回形针</div>
                <div class="code-name">#icon-huixingzhen1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-suoxiao"></use>
                </svg>
                <div class="name">缩小</div>
                <div class="code-name">#icon-suoxiao</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-shangsheng"></use>
                </svg>
                <div class="name">上升</div>
                <div class="code-name">#icon-shangsheng</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-quxiaolianjie"></use>
                </svg>
                <div class="name">取消链接</div>
                <div class="code-name">#icon-quxiaolianjie</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-bangzhuwendang"></use>
                </svg>
                <div class="name">帮助文档</div>
                <div class="code-name">#icon-bangzhuwendang</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-xiaoxi"></use>
                </svg>
                <div class="name">消息</div>
                <div class="code-name">#icon-xiaoxi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-tianjia"></use>
                </svg>
                <div class="name">添加</div>
                <div class="code-name">#icon-tianjia</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-zuo"></use>
                </svg>
                <div class="name">左</div>
                <div class="code-name">#icon-zuo</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-you"></use>
                </svg>
                <div class="name">右</div>
                <div class="code-name">#icon-you</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-xia"></use>
                </svg>
                <div class="name">下</div>
                <div class="code-name">#icon-xia</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-shang"></use>
                </svg>
                <div class="name">上</div>
                <div class="code-name">#icon-shang</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-riqi"></use>
                </svg>
                <div class="name">日期</div>
                <div class="code-name">#icon-riqi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-duihao"></use>
                </svg>
                <div class="name">对号</div>
                <div class="code-name">#icon-duihao</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-shijian"></use>
                </svg>
                <div class="name">时间</div>
                <div class="code-name">#icon-shijian</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-yiwentishi"></use>
                </svg>
                <div class="name">疑问提示</div>
                <div class="code-name">#icon-yiwentishi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-duohangwenben"></use>
                </svg>
                <div class="name">多行文本</div>
                <div class="code-name">#icon-duohangwenben</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-danxuankuang"></use>
                </svg>
                <div class="name">单选框</div>
                <div class="code-name">#icon-danxuankuang</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-danhangwenben"></use>
                </svg>
                <div class="name">单行文本</div>
                <div class="code-name">#icon-danhangwenben</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-shuzi"></use>
                </svg>
                <div class="name">数字</div>
                <div class="code-name">#icon-shuzi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-cuohao"></use>
                </svg>
                <div class="name">错号</div>
                <div class="code-name">#icon-cuohao</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-shibai1"></use>
                </svg>
                <div class="name">失败</div>
                <div class="code-name">#icon-shibai1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-tishi"></use>
                </svg>
                <div class="name">提示</div>
                <div class="code-name">#icon-tishi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-fuxuankuang"></use>
                </svg>
                <div class="name">复选框</div>
                <div class="code-name">#icon-fuxuankuang</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-xialakuang"></use>
                </svg>
                <div class="name">下拉框</div>
                <div class="code-name">#icon-xialakuang</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-charulianjie"></use>
                </svg>
                <div class="name">插入链接</div>
                <div class="code-name">#icon-charulianjie</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-shangchuan"></use>
                </svg>
                <div class="name">上传</div>
                <div class="code-name">#icon-shangchuan</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-xinjianwenjianjia"></use>
                </svg>
                <div class="name">新建文件夹</div>
                <div class="code-name">#icon-xinjianwenjianjia</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-cunchu"></use>
                </svg>
                <div class="name">存储</div>
                <div class="code-name">#icon-cunchu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-xiazai"></use>
                </svg>
                <div class="name">下载</div>
                <div class="code-name">#icon-xiazai</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-shanchu"></use>
                </svg>
                <div class="name">删除</div>
                <div class="code-name">#icon-shanchu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-chenggong"></use>
                </svg>
                <div class="name">成功</div>
                <div class="code-name">#icon-chenggong</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-jinggao"></use>
                </svg>
                <div class="name">警告</div>
                <div class="code-name">#icon-jinggao</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-daiban"></use>
                </svg>
                <div class="name">待办</div>
                <div class="code-name">#icon-daiban</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-caogao"></use>
                </svg>
                <div class="name">草稿</div>
                <div class="code-name">#icon-caogao</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-daikaifa"></use>
                </svg>
                <div class="name">待开发</div>
                <div class="code-name">#icon-daikaifa</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-tianjia1"></use>
                </svg>
                <div class="name">添加</div>
                <div class="code-name">#icon-tianjia1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-fuzhi"></use>
                </svg>
                <div class="name">复制</div>
                <div class="code-name">#icon-fuzhi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-more"></use>
                </svg>
                <div class="name">更多</div>
                <div class="code-name">#icon-more</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-chakan"></use>
                </svg>
                <div class="name">查看</div>
                <div class="code-name">#icon-chakan</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-yincang"></use>
                </svg>
                <div class="name">隐藏</div>
                <div class="code-name">#icon-yincang</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-yonghu"></use>
                </svg>
                <div class="name">用户</div>
                <div class="code-name">#icon-yonghu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-kstp-zhankai"></use>
                </svg>
                <div class="name">展开</div>
                <div class="code-name">#icon-kstp-zhankai</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-kstp-shouqi"></use>
                </svg>
                <div class="name">收起</div>
                <div class="code-name">#icon-kstp-shouqi</div>
            </li>
          
          </ul>
          <div class="article markdown">
          <h2 id="symbol-">Symbol 引用</h2>
          <hr>

          <p>这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。相关介绍可以参考这篇<a href="">文章</a>
            这种用法其实是做了一个 SVG 的集合，与另外两种相比具有如下特点：</p>
          <ul>
            <li>支持多色图标了，不再受单色限制。</li>
            <li>通过一些技巧，支持像字体那样，通过 <code>font-size</code>, <code>color</code> 来调整样式。</li>
            <li>兼容性较差，支持 IE9+，及现代浏览器。</li>
            <li>浏览器渲染 SVG 的性能一般，还不如 png。</li>
          </ul>
          <p>使用步骤如下：</p>
          <h3 id="-symbol-">第一步：引入项目下面生成的 symbol 代码：</h3>
<pre><code class="language-html">&lt;script src="./iconfont.js"&gt;&lt;/script&gt;
</code></pre>
          <h3 id="-css-">第二步：加入通用 CSS 代码（引入一次就行）：</h3>
<pre><code class="language-html">&lt;style&gt;
.icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
&lt;/style&gt;
</code></pre>
          <h3 id="-">第三步：挑选相应图标并获取类名，应用于页面：</h3>
<pre><code class="language-html">&lt;svg class="icon" aria-hidden="true"&gt;
  &lt;use xlink:href="#icon-xxx"&gt;&lt;/use&gt;
&lt;/svg&gt;
</code></pre>
          </div>
      </div>

    </div>
  </div>
  <script>
  $(document).ready(function () {
      $('.tab-container .content:first').show()

      $('#tabs li').click(function (e) {
        var tabContent = $('.tab-container .content')
        var index = $(this).index()

        if ($(this).hasClass('active')) {
          return
        } else {
          $('#tabs li').removeClass('active')
          $(this).addClass('active')

          tabContent.hide().eq(index).fadeIn()
        }
      })
    })
  </script>
</body>
</html>
